<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {CurrentUser} from "../models/user";
import getCurrentUser from "../states/userApi.ts";

const user = ref<CurrentUser>({
  name: "yuser",
  gender: "男",
  profile:"个人简介"
});
const router = useRouter()
onMounted(async () => {
  const res = await getCurrentUser();
  if (res) {
    user.value = res;
  }
})

</script>

<template>
  <van-row justify="center">
    <van-col style="margin-top: 20px">
      <van-image
          round
          width="7rem"
          height="7rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </van-col>
  </van-row>
  <van-row justify="center">
    <van-col >
      <P>{{ user.username }}</P>
    </van-col>
  </van-row>
  <div class="index">
    <van-row justify="center" gutter="20" >
      <van-col >
        <van-icon name="add" size="90px" @click="router.push('/team')"/>
      </van-col>
      <van-col >
        <van-icon name="friends" size="90px" @click="router.push('/team/my')"/>
      </van-col>
      <van-col >
        <van-icon name="setting" size="90px" @click="router.push('/user/info')"/>
      </van-col>
    </van-row>
    <van-row justify="center" gutter="20" >
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
    </van-row>
    <van-row justify="center" gutter="20" >
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
      <van-col >
        <van-icon name="add-o" size="90px"/>
      </van-col>
    </van-row>
  </div>


</template>

<style scoped>
.index{
  position: fixed;
  bottom: 120px;
  left: 26px;
}
</style>